<template>
  <div class="container">

      <div style="background:#ffffff;padding-left: 40rpx; shadow: true; margin: 10rpx; border-radius: 5rpx; display: flex; flex-direction: row">
      <div style="height: 100%; width: 100%">
        <i-row>
<!--          本次得分-->
          <i-col span="12">
            <p style="margin: 25rpx">本次得分</p>
            <div v-if="thisScore >= 85">
              <div class="score_item" style="background-color: #19be6b; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ thisScore }}</p>
              </div>
            </div>
            <div v-else-if="thisScore >= 70">
              <div class="score_item" style="background-color: #ff9900; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ thisScore }}</p>
              </div>
            </div>
            <div v-else-if="thisScore >= 60">
              <div class="score_item" style="background-color: #5cadff; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ thisScore }}</p>
              </div>
            </div>
            <div v-else>
              <div class="score_item" style="background-color: #ed3f14; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ thisScore }}</p>
              </div>
            </div>
          </i-col>
<!--          最高得分-->
          <i-col span="12">
            <p style="margin: 25rpx">最高得分</p>
            <div v-if="highestScore >= 85">
              <div class="score_item" style="background-color: #19be6b; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ highestScore }}</p>
              </div>
            </div>
            <div v-else-if="highestScore >= 70">
              <div class="score_item" style="background-color: #ff9900; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ highestScore }}</p>
              </div>
            </div>
            <div v-else-if="highestScore >= 60">
              <div class="score_item" style="background-color: #5cadff; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ highestScore }}</p>
              </div>
            </div>
            <div v-else>
              <div class="score_item" style="background-color: #ed3f14; height: 224rpx; width: 224rpx; margin: 5rpx; border-radius: 20rpx;">
                <p style="font-size: 140rpx; color: #ffffff; margin: 0rpx 0rpx 40rpx 40rpx">{{ highestScore }}</p>
              </div>
            </div>
          </i-col>
        </i-row>
      </div>
    </div>
<!--    分数等级标签-->
    <i-card>
      <i-row>
        <i-col span="6"><i-tag color="green">优秀 85+</i-tag></i-col>
        <i-col span="6"><i-tag color="yellow">良好 70+</i-tag></i-col>
        <i-col span="6"><i-tag checkable color="blue">及格 60+</i-tag></i-col>
        <i-col span="6"><i-tag checkable color="red">不及格 60-</i-tag></i-col>
      </i-row>
    </i-card>

<!--    句子得分详情-->
    <div class="word_item" style="background:#ffffff;padding: 20rpx; shadow: true; margin: 10rpx; border-radius: 5rpx">
      <div v-for="word in scoreArrDetail" :key="index">
        <p v-if="word.score >= 85" style="color: #19be6b">{{ word.sentence }}&nbsp</p>
        <p v-else-if="word.score >= 70" style="color: #ff9900">{{ word.sentence }}&nbsp</p>
        <p v-else-if="word.score >= 60" style="color: #5cadff">{{ word.sentence }}&nbsp</p>
        <p v-else style="color: #ed3f14">{{ word.sentence }}&nbsp</p>
      </div>.
    </div>

    <div style="background:#ffffff;padding: 20rpx; shadow: true; margin: 10rpx; border-radius: 5rpx">
      <p style="margin-bottom: 10rpx">未达到优秀的单词：</p>
      <i-steps direction="vertical" size="small">
        <div v-for="word in scoreArrDetail" :key="index">
          <div v-if="word.score <= 85">
            <i-step :title="word.sentence" :content="'得分: ' + word.score"></i-step>
          </div>
          <div v-else-if="word.score <= 70">
            <i-step :title="word.sentence" :content="'得分: ' + word.score"></i-step>
          </div>
          <div v-else-if="word.score <= 60">
            <i-step :title="word.sentence" :content="'得分: ' + word.score"></i-step>
          </div>
        </div>
      </i-steps>
    </div>
  </div>
</template>


<script>
  import {mapState} from 'vuex'
  export default {
    data () {
      return {
        scoreArrDetail: [], // 存放分数详情
        thisScore: '', // 本次测评得分
        highestScore: '' // 历史最高测评得分
      }
    },
    beforeMount () {
      // 挂载前从vuex获取得分详情
      this.scoreArrDetail = this.scoreArr.words
      this.thisScore = Math.round(this.scoreArr.sentence.score)
      this.highestScore = this.scoreArr.sentence.highScore
    },
    component: {
    },
    computed: {
      ...mapState([
        'scoreArr'
      ])
    },
    methods: {
    }
  }
</script>

<style scoped>
  .score_item {
    display: flex;
    flex-direction: row;
    text-align: left;
    background:#ffffff;
    padding: 20rpx;
    shadow: true;
    margin: 10rpx;

    border-radius: 25rpx;
  }
  .word_item {
    display: flex;
    flex-direction: row;
  }
</style>
